<template>
  <div class="mt10">
    <div class="clearfix">
      <span class="mr10">营销场景定向</span>
      <span class="s_fc_9 mr10" style="max-width: 76%;" title="按用户与店铺之间更细粒度的营销关系划分圈定的人群">按用户与店铺之间更细粒度的营销关系划分圈定的人群</span>
      <el-button @click.native="marketingShowModal" type="text">设置定向</el-button>
      <div class="popup">
        <el-dialog
          title="营销场景定向 "
          :visible.sync="marketingDialog"
          :close-on-click-modal="false"
          width="998px">
          <div style="height:auto;" class="slotContent">
            <div class="intelCheck">
              <ul>
                <li class="clearfix" v-for="(item,index) in labels">
                  <div class="left">
                    <input type="checkbox" @change="changeCheckbox(item)" :checked="item.status">
                    <span>{{item.name}}</span>
                  </div>
                  <div class="right clearfix">
                    <label v-for="(val,i) in item.child">
                      <input type="checkbox" @change="changeRadio(item,val,i)" :checked="val.status">
                      <span>{{val.name}}</span>
                    </label>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <span slot="footer" class="dialog-footer slotFooter">
            <a href="javascript:;" class="warning" v-show="warning5">
              <i class="el-icon-warning"></i>
              请至少选择一个子标签
            </a>
            <el-button @click="marketingDialog=false" size="small">取 消</el-button>
            <el-button type="primary" @click="marketingConfirm"  size="small">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props:{
      marketingMsg:Array
    },
    data() {
      return {
        marketingDialog: false,
        labels:[],
        marketingList:[],//传给index页面的值
        warning5: false,
      }
    },
    created(){
      this._getTip();
    },
    methods: {
      marketingShowModal() {//设置定向
        this.marketingList = [];
        this.marketingList = JSON.parse(JSON.stringify(this.marketingMsg));
        this.$http.get('/zuanzhan/crowd/marketing-scene').then((res) => {
//          console.log(res.data);
          if (res.data.code == 200) {
            let data = res.data;
            this.labels = data.data;
            this.marketingList.forEach((item,index)=>{
              this.labels.forEach((val,i)=>{
                if(item.value == val.value){
                  this.labels[i] = this.marketingList[index];
                }
              })
            })
          }
        }).catch((error) => {
          console.log(error);
        });
        this.marketingDialog = true;
        this.warning5 = false;
      },
      _getTip(){
        this.$http.get('/zuanzhan/crowd/marketing-scene').then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            let data = res.data;
            this.labels = data.data;
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      changeCheckbox(items){//点击全选时
        if(items.status){//取消选中状态
          this.$set(items,'status',0);
          items.child.forEach((item,index)=>{
            this.$set(item,'status',0);
          })
        }else{//选中状态
          this.$set(items,'status',1);
          items.child.forEach((item,index)=>{
            this.$set(item,'status',1);
          })
        }
      },
      changeRadio(items,val,i){//点击子多单选框的时
        if(val.status){//取消选中状态
          this.$set(val,'status',0);
          console.log(items)
        }else{//选中状态
          this.$set(val,'status',1);
        }
        let checkedCount = 0;
        items.child.forEach((item,index)=>{
          if(item.status == 1){
            checkedCount = checkedCount + 1;
          }
        })
        if(checkedCount == items.child.length){
          this.$set(items,'status',1);//全选框选中
        }else{
          this.$set(items,'status',0);//全选框取消
        }
      },
      marketingConfirm() {//相似宝贝定向的确认
        let arr = [];
        this.labels.forEach((item,index)=>{
          if(item.status == 1){
            item.matrix_price = {};
            arr.push(item);
          }else{
            let findIndex = item.child.findIndex(val=>val.status == 1);//这里只要有一个child的status=1就加入进去
            if(findIndex != -1){
              item.matrix_price = {};
              arr.push(item);
            }
          }
        })
//        this.marketingList = [];
        this.marketingList = JSON.parse(JSON.stringify(arr));
        if(this.marketingList.length == 0){
          this.warning5 = true;
        }else{
          this.warning5 = false;
          this.marketingDialog = false;
        }

        console.log(this.marketingList)
        this.$emit("marketingData",this.marketingList);//传给父组件
      }
    }
  }
</script>
<style scoped lang="stylus">
  .slotContent
    .intelCheck
      width: 100%;
      ul
        border-top: 1px solid #e6e6e6;
        li
          position: relative;
          border-bottom: 1px solid #e6e6e6;
          line-height: 40px;
          .left
            position: absolute;
            top: 0;
            left: 0;
            box-sizing: border-box;
            width: 162px;
            height: 100%;
            padding-top: 20px;
            padding-left: 38px;
            border-right: 1px solid #e6e6e6;
            background-color: #fafafa;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            span
              position: absolute;
              top: 20px;
              left: 60px;
          .right
            box-sizing: border-box;
            min-height: 80px;
            margin-left: 160px;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 40px;
            label
              float: left;
              width: 100px;
              height 50px;
              margin-right: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              position: relative;
              input
                position: absolute;
                top: 0px;
                left: 0px;
              span
                position: absolute;
                top: 0px;
                left: 22px;


  .warning
    color: #a40100;
    margin-right: 15px;

</style>

